<template>
	<view class="delivery-address">
		<view class="address-box" v-for="(item,index) in addressList" :key="index">
			<view class="header">
				<view class="header-left">
					<text>{{item.receiver}}</text>
					<text>{{item.mobile}}</text>
					<view class="address">
						{{item.province}}{{item.city}}{{item.area}}{{item.addr}}
					</view>
				</view>
				<view class="header-right" @click="handleEdit(item.addrId)">
					<image src="../../static/images/icon/revise.png" style="width: 20px;
					height: 20px;"></image>
				</view>
			</view>
			<view class="foot" @click="handleClick(index,item.addrId)">
				<i></i><text class="lg text-gray" :class="index==indexId?'cuIcon-'+ icon:''"></text>设置默认地址
			</view>
		</view>
		<view class="add" style="position: fixed;bottom: 0;right: 0;left: 0;text-align: center;padding: 15px;color: #f00;background-color: #fff;font-size: 16px;font-weight: 500;" @click="handleAdd">
			新增收货地址
		</view>
	</view>
</template>

<script>
	var http = require("../../utils/http");
	export default {
		data() {
			return {
				addressList: [],
				icon:'roundcheckfill',
				indexId:""
			}
		},
		onShow() {
			http.request({
				url: "/p/address/list",
				method: "get",
				data: {},
				callBack: res => {
					this.addressList = res
					// console.log(this.addressList);
					// console.log(this.swiperList, "232431");
				}
			})
		},
		onLoad() {
			http.request({
				url: "/p/address/list",
				method: "get",
				data: {},
				callBack: res => {
					this.addressList = res
					// console.log(this.addressList);
					// console.log(this.swiperList, "232431");
				}
			})
		},
		methods: {
			handleClick(index,addrId){
				this.indexId=index
				// if(this.indexId==index){
				// 	this.indexId='3122313'
				// }else{
				// 	this.indexId=index
				// }
				uni.showLoading({});
				http.request({
					url: `/p/address/defaultAddr/${addrId}`,
					method: "put",
					data: {
						addrId:addrId
					},
					callBack: res => {
						uni.hideLoading();
					}
				})
			},
			handleEdit(addrId){
				uni.navigateTo({
					url:`/pages/editAddress/editAddress?addrId=${addrId}`
				})
			},
			handleAdd(){
				uni.navigateTo({
					url:'/pages/editAddress/editAddress'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.delivery-address{
		.address-box{
			background-color: #fff;
			margin-bottom: 10px;
			.header{
				padding:10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #eee;
				padding-bottom: 20px;
				.header-left{
					text{
						margin-right: 10px;
					}
					.address{
						color: #999;
						font-size: 12px;
						margin-top: 10upx;
					}
				}
			}
			.foot{
				padding:10upx 10px  ;
				font-size: 12px;
				position: relative;
				.text-gray{
					font-size: 24px;
					color: red;
					position: absolute;
					left: 10px;
					top: 3px;
				}	
				i{
					display: inline-block;
					width: 20px;
					height: 20px;
					border: 1px solid #ddd;
					border-radius: 50%;
					vertical-align: middle;
					margin-right: 6px;
					// background-color: #f00;
				}
			}
		}
	}
</style>